import React, { Component } from 'react'

/**
 * context使用=》跨多级组件通信
 * 1. 调用 React.createContext() 创建 Provider（提供数据） 和 Consumer（消费数据） 两个组件。
 * 2. 使用 Provider 组件作为父节点。
 * 3. 在Provider上设置 value 属性，表示要传递的数据。
 * 4. 调用 Consumer 组件接收数据
 */

const { Provider, Consumer } = React.createContext()
// console.log(ShareA)

function Index3() {
  return (
    <div>
      <h3>组件3</h3>
      <Consumer>{(data) => <h1>{data}</h1>}</Consumer>
    </div>
  )
}

class Index2 extends Component {
  render() {
    return (
      <div>
        <h2>组件2</h2>
        <hr />
        <Index3 />
        <Consumer>{(data) => <h2>{data}</h2>}</Consumer>
      </div>
    )
  }
}

// 根组件
export default class Index extends Component {
  state = {
    // 共享数据
    a: 1000000,
  }

  render() {
    return (
      <Provider value={this.state.a}>
        <h1>组件1</h1>
        <hr />
        <Index2 />
      </Provider>
    )
  }
}
